<template>
	<div class="main">
		<div>
			<img src="@/assets/images/wechat/student/setup/avatar.png">
		</div>
		<div>
			<div>
				<div></div>
				<div></div>
			</div>
			<div>
				<img src="@/assets/images/wechat/student/setup/1.png">
			</div>
			<div>LV9</div>
		</div>
		<div id="radar"></div>
		<div>
			<div>
				<div>
					<div>用户编号：</div>
					<div>201506601241</div>
				</div>
				<div>
					<div>段位：</div>
					<div>入门新手</div>
				</div>
			</div>
			<div>
				<div>
					<div>胜率：</div>
					<div>47%</div>
				</div>
				<div>
					<div>总场次：</div>
					<div>49</div>
				</div>
			</div>
			<div>
				<div>
					<div>经验：</div>
					<div>56/100</div>
				</div>
				<div>
					<div>胜场：</div>
					<div>21</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		components: {
			
		},
		data() {
			return {
				
			}
		},
		created:async function() {
			
		},
		beforeMount: function() {
	
		},
		mounted: function() {
			this.gameRadar();
		},
		methods: {
			gameRadar(){
				var chartDom = document.getElementById('radar');
				var myChart = echarts.init(chartDom);
				var option;
				
				option = {
				  title: {
				   
				  },
				  legend: {
				    data: ['Allocated Budget', 'Actual Spending']
				  },
				  radar: {
				    // shape: 'circle',
				    indicator: [
				      { name: 'Sales', max: 6500 },
				      { name: 'Administration', max: 16000 },
				      { name: 'Information Technology', max: 30000 },
				      { name: 'Customer Support', max: 38000 },
				      { name: 'Development', max: 52000 },
				      { name: 'Marketing', max: 25000 }
				    ]
				  },
				  series: [
				    {
				      name: 'Budget vs spending',
				      type: 'radar',
				      data: [
				        {
				          value: [4200, 3000, 20000, 35000, 50000, 18000],
				          name: 'Allocated Budget'
				        },
				        {
				          value: [5000, 14000, 28000, 26000, 42000, 21000],
				          name: 'Actual Spending'
				        }
				      ]
				    }
				  ]
				};
				option && myChart.setOption(option);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		overflow: auto;
		>div:nth-child(1){
			width: 92px;
			height:92px;
			margin: auto;
			margin-top:33px;
			>img{
				width: 100%;
			}
		}
		>div:nth-child(2){
			position: relative;
			width: 200px;
			margin:auto;
			overflow: hidden;
			>div:nth-child(1){
				margin-top:33px;
				position: relative;
				margin-left:5px;
				>div:nth-child(1){
					background-color: #987C66;
					height: 15px;
					border-radius: 5px;
				}
				>div:nth-child(2){
					position: absolute;
					left:0;
					top:0;
					width:20%;
					height: 15px;
					background-color: #E18B4C;
					border-radius: 5px;
				}
			}
			>div:nth-child(2){
				position: absolute;
				left:0px;
				top:5px;;
			}
			>div:nth-child(3){
				position: absolute;
				text-align: center;
				left:7px;
				top:12px;
				font-size:18px;
			}
		}
		
		>#radar{
			margin-top:50px;
			height:300px;
		}
		>div:nth-child(4){
			margin-top:99px;
			margin-left:27px;
			margin-right:27px;
			>div{
				margin-top:10px;
				background-color: #F1E4D5;
				height:22px;
				border-radius:10px;
				display: flex;
				>div{
					flex:1;
					display: flex;
					line-height:22px;
					font-size: 12px;
					font-weight: normal;
					margin-left:10px;
					>div:nth-child(1){
						width:60px;
						color:#562814;
					}
					>div:nth-child(2){
						color:#916D59;
					}
				}
				>div:nth-child(1){
					border-right:1px solid #916D59;
				}
			}
		}
	}
</style>
